<!DOCTYPE html>
<html>
	<head>
		<title>iPresenter</title>

		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<!-- Google Webfonts and our stylesheet -->

		<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow" />

		<link rel="stylesheet" href="css/styles.css" />

		<link rel="stylesheet" href="css/demo2.css" />
		<script src="js/jquery-1.7.1.min.js"></script>

		<script src="js/ipresenter.packed.js"></script>
		<script>
			$(document).ready(function(){
				$('#ipresenter').iPresenter({
					animSpeed: 2000,
					timer: '360Bar',
					timerDiameter: 60,
					timerStroke: 5,
					timerPadding: 5,
					timerColor: '#000',
					timerBg: '#FFF',
					timerOpacity: 0.4,
					directionNav: false,
					controlNav: true
				});
			});
		</script>

	</head>

	<body>
<embed src="waityou.mp3" autostart="true" loop="true" hidden="true">
	

	<div class="container">
		<div id="ipresenter">
			<div class="step" data-x="0" data-y="0" data-thumbnail="img/thumbs/1.jpg">
				<img src="img/photos/1.jpg" />
			</div>

			<div class="step" data-x="1500" data-y="0" data-rotatex="180"  data-thumbnail="img/thumbs/2.jpg">
				<img src="img/photos/2.jpg" />
			</div>

			<div class="step" data-x="3000" data-y="0" data-rotatey="180" data-thumbnail="img/thumbs/3.jpg">
				<img src="img/photos/3.jpg" />
			</div>

			<div class="step" data-x="4500" data-y="0" data-rotatex="180" data-thumbnail="img/thumbs/4.jpg">
				<img src="img/photos/4.jpg" />
			</div>

			<div class="step" data-x="6000" data-y="0" data-rotate="180" data-thumbnail="img/thumbs/5.jpg">
				<img src="img/photos/5.jpg" />
			</div>

			<div class="step" data-x="7500" data-y="0" data-rotatey="180" data-thumbnail="img/thumbs/6.jpg">
				<img src="img/photos/6.jpg" />
			</div>

			<div class="step" data-x="9000" data-y="0"  data-thumbnail="img/thumbs/7.jpg">
				<img src="img/photos/7.jpg" />
			</div>

			<div class="step" data-x="10500" data-y="0" data-rotate="80" data-thumbnail="img/thumbs/8.jpg">
				<img src="img/photos/8.jpg" />
			</div>

			<div class="step" data-x="12000" data-y="0" data-rotatex="180" data-thumbnail="img/thumbs/9.jpg">
				<img src="img/photos/9.jpg" />
			</div>

			<div class="step" data-x="13500" data-y="0" data-rotatey="180" data-scale="0.6" data-thumbnail="img/thumbs/10.jpg">
				<img src="img/photos/10.jpg" />
			</div>

			<div class="step" data-x="15000" data-y="0" data-rotatey="-180" data-thumbnail="img/thumbs/11.jpg">
				<img src="img/photos/11.jpg" />
			</div>

			<div class="step" data-x="16500" data-y="0" data-rotatey="180" data-thumbnail="img/thumbs/12.jpg">
				<img src="img/photos/12.jpg" />
			</div>
		</div>
	</div>




	</body>
</html>